import { createStore } from 'vuex'
import persist from 'vuex-persistedstate'
import axios from 'axios'
import moduleA from './moduleA'
export default createStore({
  state: {
    name: '李狗蛋',
    age: 15,
    list: [],
    products: [] // 购物车数据
  },

  getters: {
    num1(state) { // 已经完成的任务数量
      let num = 0
      state.list.forEach(item => {
        if(item.check) {
          num +=1
        }
      })
      return num
    },

    num2(state) { // 正在进行的任务数量
      let num = 0
      state.list.forEach(item => {
        if(!item.check) {
          num +=1
        }
      })
      return num
    }
  },

  mutations: { // 修改state数据的唯一放发就是提交mutation
    addTask(state, value) {
      let obj = {
        task: value,
        id: new Date().getTime(),
        check: false,  // 用来定义任务是否被选中 false表示未选中
        isExit: false // 定义任务是否处于编辑状态
      }
      state.list.push(obj)
    },

    // 删除任务的方法
    del(state, i) {
      state.list.splice(i, 1)
    },

    changeName(state, value) {
      state.name = value
    },

    changeProducts(state, data) {
      state.products = data
    },

    exitChange(state, data) {
      state.list = data
    }
  },

  // actions中的方法是用来进行异步操作的方法
  actions: {
    async getGoods(context) {
      // console.log(axios.get('/data.json'));
      let data = await axios.get('/data.json')
      // console.log(context);
      // console.log(data);
      context.commit('changeProducts', data.data)
    }
    // action的每一个函数都有一个参数 参数中包含了一些vuex的方法 包括 commit dispatch state rootState rootGetters
    // getGoods(context) {
    //   // console.log(context);
    //   axios.get('/data.json').then(res => {
    //     context.commit('changeProducts', res.data)
    //   })
    // }
  },

  modules: {
    // 模块化可以让我们对vuex的数据和方法进行拆分 防止单个文件 数据过多导致 一个文件过于臃肿 难以维护
    moduleA
  },

  plugins: [
    persist({
      // storage 可以配置数据存储的方法或者位置
      storage: window.sessionStorage,
      // reducer可以存储指定的数据 存储的是返回的对象中的数据
      reducer(state) {
        return {
          list: state.list
        }
      }
    })
  ]
})
